<template>
    <div>
        <el-page-header @back="gotoback" title="返回">
            <template #content>
                <el-breadcrumb-item :to="{ path: '/organization/user' }">组织架构</el-breadcrumb-item>
            </template>
        </el-page-header>
    </div>
    <el-skeleton :rows="8" :loading="load" animated>
        <div class="header">
            <div class="head">
                <el-button type="primary" style="float: left;margin-top: 15px;margin-left: 10px;"
                    @click="add">新增组织</el-button>
            </div>
            <div class="main">
                <el-row>
                    <el-col :span="4">
                        <el-tree :data="datas" :props="defaultProps" @node-contextmenu="floderOption"
                            @node-click="handleNodeClick" id="tree" default-expand-all/>
                    </el-col>
                    <el-col :span="20">
                        <el-table v-loading="loading" :data="tableData" border class="table" max-height="55vh">
                            <el-table-column fixed prop="id" label="序号" type="index" width="80">
                            </el-table-column>
                            <el-table-column prop="name" label="用户">
                            </el-table-column>
                            <el-table-column prop="account" label="账号">
                            </el-table-column>
                            <el-table-column prop="id" label="组织.职务">
                                <template #default="scope">
                                    <el-tag :key="children.id" v-for="children in scope.row.org">{{ children.oname }}-{{
                                        children.zname
                                    }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="isDirector" label="负责人">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <el-button size="small" type="danger" @click="delete (scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="example-pagination-block" style="margin-top: 1vh;">
                            <el-pagination @current-change="changes" :page-size="limit" :current-page="page"
                                layout="prev, pager, next" :total="total" />
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </el-skeleton>
    <!-- 右键菜单 -->
    <div class="right_menu" id="menu" v-show="showRightMenu">
        <div>
            <el-button class="el-icon-circle-plus-outline" @click="adds(tree)">新增</el-button>
        </div>
        <div>
            <el-button class="el-icon-menu" @click="info(tree)">详细</el-button>
        </div>
        <div>
            <el-button class="el-icon-delete" :disabled="tree.children != 0" @click="dels(tree)">删除
            </el-button>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted, toRefs } from 'vue'
import { GetUsersByOrg } from '../../../api/user/user'//渲染数据
import { GetOrganizations } from '../../../api/user/user'//树形控件,左侧列表
import { useRouter } from 'vue-router';

export default defineComponent({
    setup() {
        const router = useRouter();
        const data = reactive({
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            loading: true,
            tableData: [],
            limit: 10,//每页显示条数
            page: 1,//当前页
            total: 0,//总条数
            datas: [],//树形数据
            load: true,//骨架屏
            tree: '',
            showRightMenu: false,//是否显示右键菜单
            id:'',
            name:''
        })

        const events = {
            data() {
                GetUsersByOrg({
                    id: 'ED4C038F3D79406CABA0CAE6837EB8BA',
                    page: data.page,
                    limit: data.limit,
                }).then((res: any) => {
                    console.log('列表---', res)
                    data.tableData = res.data.data
                    data.loading = false
                    data.load = false
                
                })
            },
            //右键菜单栏事件
            floderOption(data: any) {
                data.tree = data
                console.log("右键菜单=---", data.tree)
                data.showRightMenu = true
            },
            //点击page触发事件
            changes(val: any) {
                data.loading = true
                data.page = val
                events.bind()
            },
            //返回上一级
            gotoback() {
                window.history.go(-1)
            },
            //树形控件
            org() {
                GetOrganizations({
                    page: data.page,
                    limit: 999,
                }).then((res: any) => {
                    console.log("获取组织-----", res)
                    if (res.result == 0) {
                        data.datas = res.data.data
                    }
                })
            },
            //右键新增
            adds(){

            },
            //右键删除
            dels(){

            },
            //右键详情
            info(){

            },
            //监听数据列表
            handleNodeClick(val: any) {
                data.loading = true
                data.id=val.id
                data.name=val.name
               events.bind()
            },
            bind(){
                
                GetUsersByOrg({
                    id: data.id,
                    page: data.page,
                    limit: data.limit,
                    key: data.name
                }).then((res: any) => {
                    data.tableData = res.data.data
                    data.loading = false
                    data.total = res.data.total
                })
            },
            //跳转新增页面
            add() {
                router.push("/organization/add")
            },
            //删除
            delete() {

            }
        }
        onMounted(() => {
            events.data();
            events.org()
        })
        return {
            ...toRefs(data),
            ...events,
        }
    },
})
</script>
<style scoped>
.head {
    border: #ada5a5 solid 2px;
    height: 60px;
    box-shadow: 3px 1px 1px 1px #ccc;
    border-radius: 5px;
    margin-top: 3vh;
    width: 96%;
    margin-left: 3vh;
}

.right_menu {
    margin-top: 5%;
    z-index: 1;
    position: absolute;
    background: rgb(239, 239, 241);
    border: 1px solid rgb(241, 241, 241);
    border-radius: 5%;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
}

.header {
    border: #ccc solid 1px;
    margin-top: 2vh;
    background-color: rgba(239, 240, 245, 0.932);
    border-radius: 5px;
}

.main {
    margin-top: 3vh;
    box-shadow: 3px 1px 1px 1px #ccc;
    margin-left: 3vh;
}

.table {
    width: 98%;
    border-radius: 10px;
    border: #ada5a5 solid 2px;
}

#tree {
    border: #ada5a5 solid 2px;
    border-radius: 5px;
}
</style>
